import { useState, useEffect, useMemo, useRef } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import useMap from '../hooks/useMap';
import BlockTitle from '../../../../../framework/BlockTitle';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import BlockBody from '../../../../../framework/BlockBody';
import { Button } from 'antd';
import { createLayer, wktToFeature, navByWkt } from '../../../../../../utils/helper/mapHelper';
import { Icon, Style } from 'ol/style';
import { resourcePath } from '../../../../../../utils/resource';
import MapPointerMove from '../common/MapPointerMove';
import Detail from './Detail';
import Legend from '../common/Legend';
import BlockPanel from '../common/BlockPanel';
import ScrollTable from '../../../../../common/ScrollTable';
import Yujinmsg from '../Yujinmsg';
import BasicTable from '../FloodWarning/BasicTable';
import JcdDetail from './JcdDetail';
export default function EarthquakeWarning(props) {
    const map = useMap();
    const [datas, setDatas] = useState();
    const [params, setParams] = useState({
        // pageSize: 5,
        // pageNum: 1,

    });
    const [total, setTotal] = useState();
    const [currentPage, setCurrentPage] = useState(1);
    const containerRef = useRef(null);

    const layer = useMemo(() => {
        return createLayer((feature) => {
            return new Style({
                image: new Icon({
                    src: resourcePath.mapIcons.dze_blue,
                    scale: resourcePath?.scales?.dze_blue_scale || 0.7,
                    anchor: [0.5, 1]
                })
            })
        }, []);
    }, []);

    useEffect(() => {
        if (layer && datas) {
            map.dispatchEvent({
                type: 'legend-layer',
                layer,
                icon: resourcePath.mapIcons.dze_blue,
                title: '地震监测'
            });
            const features = datas?.filter(data => {
                return data.jd && data.wd
            }).map(data => {
                const f = wktToFeature(`POINT(${data.jd} ${data.wd})`)
                f.setProperties({ ...data });
                return f;
            })
            layer.getSource().addFeatures(features)
            layer.set('visible', false);
            map.addLayer(layer);
        }
    }, [layer, map, datas])
    useEffect(() => {
        JcyjApi.sbao_detail(params).then(resp => {
            setDatas(resp.rows.map(data => {
                return {
                    ...data,
                    geom: `POINT(${data.jd} ${data.wd})`
                }
            }));
        });
    }, [params])
    useEffect(() => {
        const handler = evt => {
            const features = map.getFeaturesAtPixel(evt.pixel);
            const targetFeature = features?.find(f => {
                return f.get('ckdd');
            })
            if (targetFeature) {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: targetFeature.get('ckdd'),
                    component: <Detail item={targetFeature.getProperties()} />,
                    feature: targetFeature
                })
            }
        }
        map.on('singleclick', handler);
        return () => {
            map.un('singleclick', handler);
        }
    }, [map])

    useEffect(() => {
        if (map) {
            setTimeout(() => {
                // map.dispatchEvent({
                //     type: 'fixed.item.show',
                //     title: '降雨量',
                //     component: <RainTable />
                // })
                map.dispatchEvent({
                    type: 'fixed.item.show',
                    title: '地震',
                    component: <Yujinmsg activeKey={'地震'} />
                })
            }, 100);
        }
    }, [map])

    const columns = [
        {
            title: '地点',
            dataIndex: 'ckdd',
            ellipsis: true
        },
        {
            title: '时间',
            dataIndex: 'fzsj',
            ellipsis: true
        },
        {
            title: '深度',
            dataIndex: 'sd',
            align: 'center',
            ellipsis: true
        },
        {
            width: 80,
            align: "center",
            render: (text, record) => {
                return <Button type="link" size="small" onClick={e => {
                    map.dispatchEvent({
                        type: "detail.show",
                        title: record.ckdd,
                        component: <Detail item={record} />
                    })
                    //console.log("2",record)
                }}>快速评估</Button>
            }
        }
    ];

    return <>
        <PanelLeft className="layout-v" style={{
            // top: 98
        }}>
            <BlockPanel bodyClassName='layout-v' bodyStyle={{
                overflow: 'hidden'
            }} className={'fill h0'} title={<div>
                地震速报（<span>{datas?.length}</span>）
            </div>}>
                <div ref={containerRef} className="table-div fill h0" style={{ height: '100%', overflow: "hidden" }}>
                    <ScrollTable
                        columns={columns}
                        dataSource={datas}
                        size="small"
                        // bordered
                        autoScroll={true}
                        scrollSpeed={50}
                        otherHeight={80}
                        parentNode={containerRef}
                        onRow={record => {
                            return {
                                onClick: e => {
                                    if (record.shp) {
                                        navByWkt(record.shp, map)
                                    }
                                }
                            }
                        }}
                        pagination={{
                            current: currentPage,
                            pageSize: 20,
                            simple: true,
                            onChange: (page) => {
                                setCurrentPage(page);
                            }
                        }}
                    />
                </div>
            </BlockPanel>
            <BasicTable jcdlx={"测震"} title="监测点" mapScale={resourcePath.scales.sk_blue_scale} mapIcon={resourcePath.mapIcons[`dze_blue`]} onDetail={item => {
                map.dispatchEvent({
                    type: 'detail.show',
                    title: item.zdm,
                    component: <JcdDetail item={item} />
                })
            }} />
        </PanelLeft>
        <Legend />
        <MapPointerMove field={'ckdd'} />
    </>;
}